<template>
  <div class="container">
    <el-row>
      <el-card shadow="never">
        <div slot="header">
          <el-form :inline="true" :model="searchForm" size="small">
            <el-form-item label="班级" class="el-search-item">
			  <el-select v-model="searchForm.grade" clearable placeholder="选择班级" @change="xuanZheNJ">
				<el-option value="七年级">七年级</el-option>
				<el-option value="八年级">八年级</el-option>
			  </el-select>
            </el-form-item>
			<el-radio-group v-model="searchForm.course">
				<el-form-item prop="course71" label="周二课" v-show="qiNianJi">
					<el-radio v-for="iv in course71List" :label="iv.course" :key="iv.course">{{iv.course}}<span style="color:blue;">{{iv.slZg-iv.slYx}}</span></el-radio>
				</el-form-item>
				<el-form-item prop="course72" label="周三课" v-show="qiNianJi">
					<el-radio v-for="iv in course72List" :label="iv.course" :key="iv.course">{{iv.course}}<span style="color:blue;">{{iv.slZg-iv.slYx}}</span></el-radio>
				</el-form-item>
				<el-form-item prop="course81" label="周二课" v-show="baNianJi">
					<el-radio v-for="iv in course81List" :label="iv.course" :key="iv.course">{{iv.course}}<span style="color:blue;">{{iv.slZg-iv.slYx}}</span></el-radio>
				</el-form-item>
				<el-form-item prop="course82" label="周三课" v-show="baNianJi">
					<el-radio v-for="iv in course82List" :label="iv.course" :key="iv.course">{{iv.course}}<span style="color:blue;">{{iv.slZg-iv.slYx}}</span></el-radio>
				</el-form-item>
			</el-radio-group>
            <el-form-item class="el-search-item">
              <el-button type="success" plain icon="el-icon-search" @click="searchGetDate">查询</el-button>
			  <el-button type="success" plain icon="el-icon-search" @click="exportAll">导出表格</el-button>
			  <span style="color:red;padding-left:15px;">{{tongjiRenShu}}</span>
            </el-form-item>
          </el-form>
        </div>
        <!--数据表格 element ui-->
        <el-table :data="tableData" :height="tableHeight" style="width: 100%">
			<el-table-column label="班级" align="center" sortable>
				<template slot-scope="scope">{{scope.row.className}}</template>
			</el-table-column>
			<el-table-column label="姓名" align="center" sortable>
				<template slot-scope="scope">{{scope.row.name}}</template>
			</el-table-column>
        </el-table>
        <!--分页组件
        <el-pagination style="padding:0;text-align: center;" background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"
                       :current-page="pageNum" :page-sizes="[8, 15, 20]" :page-size="pageSize" :total="total">
        </el-pagination> -->
      </el-card>
    </el-row>
  </div>
</template>
<script>
  import test_schoolCourseSelection from "@/api/test/schoolCourseSelection";
  export default {//vue3
    data() {
		// 添加自定义校验规则
		const validateCourseDg = (rule, value, callback) => {
		    if (value.length!=2) {
				callback(new Error('选择两项课程'));
		    } else {
				callback();
		    }
		}
      return {
        // 表格数据
        tableData: [],
        // 分页数据
        total: 0,
        pageNum: 1,
        pageSize: 200000,
        // 表格高度
        tableHeight: 0,
        // 用来存放日期组件所选中的值
        checkedTime: '',
        // 查询参数
        searchForm: {grade: null, course: null,},
        // 弹出层
        dialog: {flag: 0, dialogTitle: "", visible: false},
        // 菜单弹出层
        menuDialog: {dialogTitle: "", visible: false},
        
		course71List: [],
		course72List: [],
		course81List: [],
		course82List: [],
		tongjiRenShu: "请选择班级、课程查询",
        // 提交按钮文字
        loading: {status: false,BtnText: '确 定',SubText: '提交中...'},
        // 表单校验
        rules: {
          name: [{required: true,trigger: "change",message: "请输入名称"}],
          className: [{required: true,trigger: "change",message: "请输入班级"}],
          courseDg: [{required: true,trigger: "change",message: "请选择课程"},{validator: validateCourseDg,trigger: "change",message: "请选择两项课程"}],
        },
        // 所有权限数据
        treeData: [],
        // 树形控件的属性绑定对象
        treeProps: {children: 'children', label: 'label'},
        // 默认选中的节点id值
        defKeys: [],
        // 角色id
        roleId: null,
		qiNianJi: false,
		baNianJi: false,
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 205;
      });
	  test_schoolCourseSelection.getKxsl().then(res => {
	    if (res.data.code === 2000) {
	      this.course71List = res.data.data["七年级周二"];
	  	this.course72List = res.data.data["七年级周三"];
	  	this.course81List = res.data.data["八年级周二"];
	  	this.course82List = res.data.data["八年级周三"];
	    }
	  });
    },
    created() {
    },
    watch: {
      "checkedTime"(value) {
        this.searchForm.startTime = null;
        this.searchForm.endTime = null;
        if (value != null) {
          let timeArr = value.toString().split(",");
          timeArr.forEach((item,i) => {
            if(i === 0) {
              this.searchForm.startTime = item;
            }else {
              this.searchForm.endTime = item;
            }
          });
        }
      }
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.pageNum = val
      },
	  searchGetDate(){
		  if(this.searchForm.grade && this.searchForm.course){
			  this.getDataList();
		  }else{
			  this.$message.error("请选择年级、课程！");
			  return false;
		  }
	  },
      // 获取列表
      getDataList() {
        test_schoolCourseSelection.list({
          grade: this.searchForm.grade,
		  course: this.searchForm.course,
        }).then(res => {
          if(res.data.code === 2000) {
			if(res.data.data && res.data.data.length > 0){
				this.$message.success(res.data.msg);
				this.tongjiRenShu = res.data.msg;
			}else{
				this.$message.error("班级,课程没有人选择！");
			}
            this.tableData = res.data.data;
          }
        })
      },
      // 新增按钮操作
      openAdd() {
        this.dialog.flag = 0;
        this.resetForm("schoolCourseSelectionForm");
        this.dialog.dialogTitle = "录入我的选课";
        this.dialog.visible = true;
      },
      // 更新按钮操作
      openUpdate(row) {
        this.dialog.flag = 1;
        this.resetForm("schoolCourseSelectionForm");
        this.dialog.dialogTitle = "编辑";
        this.dialog.visible = true;
        this.getById(row.schoolCourseSelectionId);
      },
      // 提交数据操作
      submitFun() {
        this.$refs.schoolCourseSelectionForm.validate(valid => {
          if(valid){
          }
        });
      },
      // 根据id获取信息
      getById(id) {
        test_schoolCourseSelection.getById(id).then(res => {
          if (res.data.code === 2000) {
            this.schoolCourseSelectionForm.schoolCourseSelectionId = res.data.data.schoolCourseSelectionId;
          }
        });
      },
      // 根据id删除
      deleteFun(row) {
        this.$confirm("确定删除当前吗？", "系统提示", {confirmButtonText: "确定", cancelButtonText: "取消", type: 'error'
        }).then(() =>{
            test_schoolCourseSelection.remove(row.schoolCourseSelectionId).then(res => {
            if(res.data.code === 2000){
              this.$message.success(res.data.msg);
              this.getDataList()
            }else {
              this.$message.error(res.data.msg);
            }
          })
        }).catch(() => {
          this.$message.info("取消删除");
        });
      },
      // 清空表单
      resetForm(formName) {
        if (this.$refs[formName]) {
          this.$refs[formName].resetFields();
        }
      },
	  xuanZheNJ(){
		if (this.searchForm.grade.startsWith('七年级')) {
			this.qiNianJi = true;this.baNianJi = false;
		}else{
			this.qiNianJi = false;this.baNianJi = true;
		}
	  },
	  getKxsl(){
	  },
	  // 导出选课表
	  exportAll() {
		  if(this.searchForm.grade && this.searchForm.course){
			  this.getDataList();
		  }else{
		  	this.$message.error("请选择年级、课程！");
		  	return false;
		  }
	      test_schoolCourseSelection.exportAll({grade: this.searchForm.grade , course: this.searchForm.course}).then(res => {
	          // 获取文件名
	          const disposition = res.headers['content-disposition'];
	          let fileName = disposition.substring(disposition.indexOf('filename=') + 9, disposition.length);
	          const blob = new Blob([res.data],{type: "application/vnd.ms-excel"});
	          // 创建一个超链接
	          const eLink = document.createElement("a");
	          eLink.download = decodeURI(fileName);
	          eLink.style.display = "none";
	          eLink.href = URL.createObjectURL(blob);
	          document.body.appendChild(eLink);
	          eLink.click();
	          // 释放URL对象
	          URL.revokeObjectURL(eLink.href);
	          document.body.removeChild(eLink);
	      });
	  },
    }
  }
</script>
<style lang="less" scoped>
  .el-search-item {
    margin-bottom: 0;
  }
  .el-card/deep/.el-card__body {
    padding: 0 10px 10px 10px !important;
  }
  .el-card/deep/.el-card__header {
    border-bottom: none !important;padding: 10px 10px !important;
  }
</style>